<!-- 使用说明：
<areaPicker ref="areaPicker" @getAreaPicker="getAreaPicker"></areaPicker>

import areaPicker from '@/components/pageComponents/sp-store/area-picker/index.vue';
components: {
	areaPicker
},

data(){
	return{
		areaTxt: '',
	}
}

methods:{
	openAreaPicker() {
		this.$refs.areaPicker.open();
	},
	getAreaPicker(val) {
		console.log('接收省市区', val);
		this.areaTxt = `${val.value[0]}/${val.value[1]}/${val.value[2]}`;
	},
}
 -->


<template>
	<u-picker :show="show" ref="uPicker" :loading="loading" :columns="columns" @change="changeHandler" @cancel="cancel" @confirm="confirm"></u-picker>
</template>

<script>
import { getArea } from '@/service/api/sp-store/index.js';
export default {
	data() {
		return {
			show: false,
			loading: false,
			columns: [['北京'], ['市辖区'], ['东城区']],
			provinceArr: [],
			cityArr: [],
			areaArr: []
		};
	},
	mounted() {
		this.initFun();
	},
	methods: {
		open() {
			this.show = true;
		},
		cancel() {
			this.show = false;
		},
		confirm(e) {
			this.show = false;
			this.$emit('getAreaPicker', e);
		},
		async changeHandler(e) {
			let { columnIndex, index } = e;
			if (columnIndex === 0) {
				this.loading = true;
				Promise.all([this.getCityData(index)]).finally(() => {
					this.getAreaData();
				});
			} else if (columnIndex === 1) {
				this.loading = true;
				await this.getAreaData(index);
			}
		},

		initFun() {
			Promise.all([this.getProvinceData()]).finally(() => {
				this.getCityData();
				setTimeout(() => {
					this.getAreaData();
				}, 100);
			});
		},

		// 请求省数据
		getProvinceData() {
			return new Promise(resolve => {
				let picker = this.$refs.uPicker;
				let data = { type: 1 };
				getArea(data).then(res => {
					this.provinceArr = res;
					let provinceArr = [];
					res.forEach(el => {
						provinceArr.push(el.label);
					});
					picker.setColumnValues(0, provinceArr);
					this.loading = false;
					resolve();
				});
			});
		},
		// 请求市数据
		getCityData(index) {
			let provinceIndex = index ? index : 0;
			return new Promise(resolve => {
				let picker = this.$refs.uPicker;
				this.provinceLabel = this.provinceArr[provinceIndex].label;
				let data = {
					provinceName: this.provinceLabel,
					type: 2
				};
				getArea(data).then(res => {
					this.cityArr = res;
					let cityArr = [];
					res.forEach(el => {
						cityArr.push(el.label);
					});
					picker.setColumnValues(1, cityArr);
					this.loading = false;
					// console.log('请求市数据');
					resolve();
				});
			});
		},
		// 请求区数据
		getAreaData(index) {
			let cityIndex = index ? index : 0;
			return new Promise(resolve => {
				let picker = this.$refs.uPicker;
				let data = {
					provinceName: this.provinceLabel,
					code: this.cityArr[cityIndex].label,
					type: 3
				};
				getArea(data).then(res => {
					let areaArr = [];
					res.forEach(el => {
						areaArr.push(el.label);
					});
					picker.setColumnValues(2, areaArr);
					this.loading = false;
					// console.log('请求区数据');
					resolve();
				});
			});
		}
	}
};
</script>
